<!-- 我的头像（修改头像） -->
<template>
  <div id="MyHead">
    <!-- 头部 -->
    <Head BackType4="1" headChang='1'  NoticeType9='1' v-on:pointWhiteClick="pointWhiteClick" title="我的头像"></Head>
    <div id="MyHeadMain">
      <img :src="HeadPortrait" alt="">
    </div>
    <!-- <div id="Mask" @click="cancel()" v-show="hidden"></div> -->
    
    <van-actionsheet
      v-model="show"
      cancel-text="取消"
      @select="onSelect"
      @cancel="onCancel"
    >
      <van-uploader class="SubmitUpLoad" name="uploader" :after-read="onRead">
        <van-button class="SubmitUpLoadButtom" type="default">修改头像</van-button>
      </van-uploader>
    </van-actionsheet> 
      
      <!-- <van-button class="cancel" @click="cancel()" type="default">取消</van-button> -->

  </div>
</template>

<script>
  import Head from "../components/Head"
  import {Actionsheet, Button, Uploader, Toast } from 'vant';
  export default {
    data(){
      return{
        show:false,
        HeadPortrait:'',
      }
    },
    components:{
      Head,
      [Uploader.name]:Uploader,
      [Button.name]:Button,
      [Actionsheet.name]:Actionsheet,
      [Toast.name]:Toast,
    },
    mounted(){
      var that = this
      /**
      * 获取个人信息(获取头像)
      */
      this.$get(urlConfig.memberInfo)
      .then(res => {
        if(res.data ==''){
          
        }else{
          if(res.data.pic == urlConfig.BaseUrl){
            that.HeadPortrait = require('@/assets/img/NoPic.png');
          }else{
            that.HeadPortrait = res.data.pic;
          }
        }
      })
    },
    methods:{
      pointWhiteClick(){
        this.show = true;

      },
      onSelect(item) {
        // 点击选项时默认不会关闭菜单，可以手动关闭
        console.log(2)
        // this.show = false;
        console.log(item.name);
      },
      onCancel(item){
        // this.show = false;
        // 点击取消按钮，不上传图片
        console.log(1)
      },
      onRead(item){
        // 点击图片上传完成，获取file对象列表
        var file = item.content
        /**
        * 图片上传获取后台img
        */
        var avatartext={
          pic:file,
        }
        console.log(avatartext)
        this.$post(urlConfig.imageUpload,avatartext)
          .then(res => {
          console.log(res);
          let MyHeadImg = res.data.url[0]
          this.HeadPortrait = urlConfig.BaseUrl+res.data.url
          /**
          * 修改个人信息(获取头像)
          */
          var HeadImg={
            pic:MyHeadImg
          }
          console.log(HeadImg)
          this.$post(urlConfig.avatar,HeadImg)
            .then(res => {
            console.log(res);
            this.show = false;
            Toast.success('头像修改成功');
          })
        })
      },
    }
  }
</script>

<style scoped lang='less'>
  #MyHead{
    #MyHeadMain{
      position: fixed;
      top: 88px;
      left: 0;
      bottom: 0;
      background: #000;
      width: 100%;
      img{
        margin-top: 150px;
        width: 750px;
        height: 750px;
      }
    }
    .SubmitUpLoad{
      
      .SubmitUpLoadButtom{
        border: 0px;
        width: 750px;
        font-size: 32px;
        height: 100px;
        &:active{
          background: #e2e2e2;
        }
      }
    }
  }
</style>
